<template>
  <div class="scanner">
    <van-nav-bar title="按单查询" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row style="margin-top: 0.5rem;" type="flex" justify="center">
      <van-col>
        <van-form>
          <van-field
            v-model="putawayParams.customerOrderCode"
            ref="customerOrderCode"
            id="customerOrderCode"
            name="客户单号"
            label="客户单号"
            placeholder="客户单号"
            :readonly="customerOrderCodeReadOnly"
            @focus="customerOrderCodeFocusClick"
            @click="customerOrderCodeFocusClick"
            @keyup.enter.native="recCartonNumberFocus"
          />
          <van-field
            v-model="putawayParams.recCartonNumber"
            ref="recCartonNumber"
            id="recCartonNumber"
            name="入库箱号"
            label="入库箱号"
            placeholder="入库箱号"
            :readonly="recCartonNumberReadOnly"
            @focus="recCartonNumberFocusClick"
            @click="recCartonNumberFocusClick"
            @keyup.enter.native="excuteItemQuery"
          />
          <van-row style="margin-top:16px;margin-left:16px;">
            <van-col span="8">
              <van-cell title="可上架" class="van-cell-style" v-model="allowCartonQty" ref="allowCartonQty" id="allowCartonQty" />
            </van-col>
            <van-col span="8" style="text-align:center">
              <van-cell title="已上架" class="van-cell-style" v-model="putawayCartonQty" ref="putawayCartonQty" id="putawayCartonQty" />
            </van-col>
            <van-col span="8" style="text-align:center">
              <van-cell title="差异" class="van-cell-style" v-model="differCartonQty" ref="differCartonQty" id="differCartonQty" />
            </van-col>
          </van-row>
        </van-form>
        <van-row>
          <div style="float: right; margin: 8px;">
            <van-button type="primary" size="small" @click="reset()">重置</van-button>
          </div>
        </van-row>
        <van-row>
          <van-list :loading="loading" :finished="true" finished-text="没有更多了" @load="excuteItemQuery">
            <van-cell v-for="item in list" :key="item.recCartonNumber">
              <van-row>
                <van-col span="12">
                  上架箱号：
                </van-col>
                <van-col span="12">
                  {{ item.recCartonNumber }}
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  应上架数量：
                </van-col>
                <van-col span="12">
                  {{ item.allowPutawayQty }}
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  已上架数量：
                </van-col>
                <van-col span="12">
                  {{ item.oldPutawayQty }}
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  差异数量：
                </van-col>
                <van-col span="12" style="color:red">
                  {{ item.differQty }}
                </van-col>
              </van-row>
            </van-cell>
          </van-list>
        </van-row>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {excuteItemQuery} from "@/api/biz/putaway/boxPutaway.js";

export default {
  name: "boxPutaway",
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  watch: {
    // 扫描枪操作
    pdaScanData: {
      handler(data) {
        this.scanEvent(data.data);
        let input = document.activeElement.id;
        if (input == "customerOrderCode") {
          this.putawayParams.customerOrderCode = data.data;
        }
        if (input == "recCartonNumber") {
          this.putawayParams.recCartonNumber = data.data;
        }
      },
      deep: true
    }
  },
  created() {
    // 默认光标在箱号框
    this.customerOrderCodeFocus();
  },
  data() {
    return {
      // 只读选项
      customerOrderCodeReadOnly: false,
      recCartonNumberReadOnly: false,
      // 定义扫描数据
      scanData: [],
      // 表单参数
      putawayParams: {
        businessType: "B2B",
        recCartonNumber: "",
        customerOrderCode: "",
        allowPutawayQty: 0,
        oldPutawayQty: 0,
        differQty: 0
      },
      allowCartonQty: 0,
      putawayCartonQty: 0,
      differCartonQty: 0,
      // 列表数据
      list: [],
      loading: false
    };
  },
  methods: {
    // 扫描枪扫描
    clickEvent() {
      this.scanData = [];
      // this.$toast.success("扫描数据被清理了");
    },
    scanEvent(data) {
      this.scanData.push(data);
    },
    scanErrorEvent() {},
    cellClickEvent() {},
    // 光标跳转至客户订单号
    customerOrderCodeFocus() {
      this.$nextTick(() => {
        this.$refs.customerOrderCode.focus();
      });
    },
    // 光标跳转至箱号
    recCartonNumberFocus() {
      this.$nextTick(() => {
        this.$refs.recCartonNumber.focus();
      });
    },
    // 客户订单号框点击或失焦
    customerOrderCodeFocusClick() {
      this.customerOrderCodeReadOnly = true;
      setTimeout(() => {
        this.customerOrderCodeReadOnly = false;
      }, 200);
    },
    // 箱号框点击或失焦
    recCartonNumberFocusClick() {
      this.recCartonNumberReadOnly = true;
      setTimeout(() => {
        this.recCartonNumberReadOnly = false;
      }, 200);
    },
    // 查询
    excuteItemQuery() {
      if (this.putawayParams.recCartonNumber == "" && this.putawayParams.customerOrderCode == "") {
        this.$notify({type: "warning", message: "请输入查询条件！"});
        this.customerOrderCodeFocus();
        return false;
      }
      excuteItemQuery(this.putawayParams).then(response => {
        if (response.data.status) {
          if (response.data.data.length > 0) {
            this.list = response.data.data;
            // 统计客户单号下已未上架及差异箱数
            if (this.putawayParams.customerOrderCode != "") {
              this.allowCartonQty = response.data.data[0].allowCartonQty;
              this.putawayCartonQty = response.data.data[0].putawayCartonQty;
              this.differCartonQty = response.data.data[0].differCartonQty;
            } else {
              this.allowCartonQty = 0;
              this.putawayCartonQty = 0;
              this.differCartonQty = 0;
            }
          } else {
            this.list = [];
            this.allowCartonQty = 0;
            this.putawayCartonQty = 0;
            this.differCartonQty = 0;
          }
          this.$notify({type: "success", message: response.data.message});
        } else {
          this.putawayParams.recCartonNumber = "";
          this.putawayParams.customerOrderCode = "";
          this.allowCartonQty = 0;
          this.putawayCartonQty = 0;
          this.differCartonQty = 0;
          this.customerOrderCodeFocus();
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },
    // 返回上一级页面
    onClickLeft() {
      this.$router.push({
        name: "b2bPutaway"
      });
    },
    reset() {
      this.putawayParams.customerOrderCode = "";
      this.putawayParams.recCartonNumber = "";
      this.customerOrderCodeFocus();
      this.list = [];
      this.allowCartonQty = 0;
      this.putawayCartonQty = 0;
      this.differCartonQty = 0;
    }
  }
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}

.van-cell-style {
  .van-cell__value {
    width: 40%;
    text-align: center;
    color: red;
  }
  padding-right: 0px;
  padding-left: 0px;
}
</style>
